<template>
  <div id="simulation-main-container" class="main-container">
    <div class="mc-left xsz-container" v-show="activeDevice == DEVICETYPE.XSZ">
      <div class="mc-left-1">
        <div class="sub-top">
          <div class="wc-left">
            <div class="icon"></div>
          </div>
          <div class="wc-right">
            <div class="wc-right-container">
              <div class="wc-right-top">当前泄水流量</div>
              <div class="wc-right-bottom">53423 m³/s</div>
            </div>
          </div>
        </div>
        <div class="sub-bottom"></div>
      </div>

      <div class="mc-left-2">
        <div class="sub-top">
          <h3>泄水闸控制表</h3>
        </div>
        <div class="sub-bottom">
          <div v-for="group in xszGroups" :key="group.title">
            <div class="group-title">
              <a-checkbox
                @change="
                  e => {
                    groupChange(e, group);
                  }
                "
              >
              </a-checkbox>
              <span>{{ group.title }}</span>
            </div>
            <div class="opratebtns">
              <div
                class="oprateitem"
                v-for="item in opennessInfo.filter(x => x.group == group.title)"
                :key="item.code"
              >
                <div class="checkboxitem">
                  <a-checkbox v-model="item.checked"></a-checkbox>
                </div>
                <div class="btnitem">
                  <div class="text-1">{{ item.name }}</div>
                  <div class="slider">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="item.openness"
                          :min="0"
                          :max="100"
                          :step="1"
                          :data-id="item.code"
                          @change="
                            value => {
                              opennessChange2(value, item);
                            }
                          "
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="item.openness2"
                          :min="0"
                          :max="100"
                          :step="1"
                          :formatter="percentFormatter"
                          :data-id="item.code"
                          @pressEnter="
                            e => {
                              opennessChange(e, item);
                            }
                          "
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mc-left cz-container" v-show="activeDevice == DEVICETYPE.CZ">
      <div class="mc-left-sub mc-left-2">
        <div class="sub-top">
          <h3>船闸上、下游闸门</h3>
        </div>
        <div class="sub-bottom">
          <div class="opratebtns">
            <div class="oprateitem" v-for="(cz, i) in czList" :key="i">
              <div class="title">{{ cz.title }}</div>
              <div class="btn">
                <a-switch
                  :disabled="cz.disabled"
                  v-model="cz.checked"
                  @change="
                    checked => {
                      onCZChange(checked, cz);
                    }
                  "
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mc-left-sub mc-left-4" :class="{ enable: locksObj.enable }">
        <div class="sub-top">
          <h3>等待船只</h3>
        </div>
        <div class="sub-bottom">
          <div class="item-list">
            <div class="item-list-left">
              <div
                class="item"
                v-for="item in locksObj.boards"
                :key="item.code"
                @click="itemChoosed(item)"
                :class="'active_' + item.choosed"
              >
                <p>
                  <span>船只型号</span>：<span>{{ item.code }}</span>
                </p>
                <p>
                  <span>船只尺寸</span>：<span>{{ item.size }}</span>
                </p>
                <p>
                  <span>船只类型</span>：<span>{{ item.type }}</span>
                </p>
                <p>
                  <span>尺寸类型</span>：<span>{{ item.sizetype }}</span>
                </p>
              </div>
            </div>
            <div class="item-list-right" id="bollard-container">
              <div class="pos-top pos-icon" :class="{ down: locksObj.isdown }">
                <div class="pos-top-left"></div>
                <div class="pos-top-right"></div>
              </div>
              <div class="pos-center">
                <div class="pos-center-1">
                  <div v-for="i in locksObj.itemnum" :key="i" class="dot-item">
                    <span class="dot"></span>
                  </div>
                </div>
                <div class="pos-center-2">
                  <div class="point-list" @mouseup="pointitemMouseupHandle">
                    <div class="point-list-left">
                      <div
                        v-for="i in locksObj.itemnum"
                        :key="i"
                        :data-id="i"
                        class="point-item"
                        @mousedown="pointitemMousedownHandle"
                        @mouseenter="pointitemMouseenterHandle"
                        @click="pointitemClickHandle"
                      ></div>
                    </div>
                    <div class="point-list-right">
                      <div
                        v-for="i in locksObj.itemnum"
                        :key="i"
                        :data-id="i + locksObj.itemnum"
                        class="point-item"
                        @mousedown="pointitemMousedownHandle"
                        @mouseenter="pointitemMouseenterHandle"
                        @click="pointitemClickHandle"
                      ></div>
                    </div>
                  </div>
                </div>
                <div class="pos-center-3">
                  <div v-for="i in locksObj.itemnum" :key="i" class="dot-item">
                    <span class="dot"></span>
                  </div>
                </div>
              </div>
              <div
                class="pos-bottom pos-icon"
                :class="{ down: locksObj.isdown }"
              >
                <div class="pos-top-left"></div>
                <div class="pos-top-right"></div>
              </div>
            </div>
          </div>
          <div class="opratebtn">
            <div class="type-item" @click="startExecute">
              <span class="text">确认执行</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div
      class="mc-left slfdjz-container"
      v-show="activeDevice == DEVICETYPE.SLFDJZ"
    >
      <div class="mc-left-2">
        <div class="sub-top">
          <h3>水轮发电机组</h3>
        </div>
        <div class="sub-bottom">
          <div class="opratebtns">
            <div class="oprateitem" v-for="(fdj, i) in slfdjzList" :key="i">
              <div class="title">{{ fdj.title }}</div>
              <div class="btn">
                <a-switch
                  v-model="fdj.checked"
                  @change="
                    checked => {
                      onFDJChange(checked, fdj);
                    }
                  "
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mc-center"></div>

    <div class="mc-right">
      <div class="mc-right-sub mc-right-4">
        <div class="sub-top">
          <h3>环境设置</h3>
        </div>
        <div class="sub-bottom">
          <div class="data-container">
            <div class="data-item">
              <div class="title">
                <span>天气设置</span>
                <div
                  class="shrinkbtn"
                  :class="{ opened: envPanel.weather }"
                  @click="shrinkbtnClick(1)"
                ></div>
              </div>
              <div class="content" v-show="envPanel.weather">
                <div class="env-item">
                  <div class="item-title">天气</div>
                  <div class="item-btns">
                    <div
                      class="btn"
                      :class="{
                        active: weather.curweather == WEATHERTYPE.CLOUDY
                      }"
                      @click="weatherClick(WEATHERTYPE.CLOUDY)"
                    >
                      阴天
                    </div>
                    <div
                      class="btn"
                      :class="{
                        active: weather.curweather == WEATHERTYPE.SUNNY
                      }"
                      @click="weatherClick(WEATHERTYPE.SUNNY)"
                    >
                      晴天
                    </div>
                    <div
                      class="btn"
                      :class="{
                        active: weather.curweather == WEATHERTYPE.RAINY
                      }"
                      @click="weatherClick(WEATHERTYPE.RAINY)"
                    >
                      下雨
                    </div>
                    <div
                      class="btn"
                      :class="{
                        active: weather.curweather == WEATHERTYPE.SNOWY
                      }"
                      @click="weatherClick(WEATHERTYPE.SNOWY)"
                    >
                      下雪
                    </div>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">时间</div>
                  <div class="item-btns">
                    <div
                      class="btn"
                      @click="changeDayNight(true)"
                      :class="{ active: !light.isnight }"
                    >
                      白天
                    </div>
                    <div
                      class="btn"
                      @click="changeDayNight(false)"
                      :class="{ active: light.isnight }"
                    >
                      夜晚
                    </div>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">光源强度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="light.strength"
                          :min="0"
                          :max="2"
                          :step="0.1"
                          @change="lightStrengthChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="light.strength"
                          :min="0"
                          :max="2"
                          :step="0.1"
                          :formatter="percentFormatter"
                          @change="lightStrengthChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">光源角度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="light.times"
                          :min="6"
                          :max="18"
                          :step="0.5"
                          @change="lightTimesChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="light.times"
                          :min="6"
                          :max="18"
                          :step="0.5"
                          :formatter="angleFormatter"
                          @change="lightTimesChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
              </div>
            </div>
            <div class="data-item">
              <div class="title">
                <span>水体设置</span>
                <div
                  class="shrinkbtn"
                  :class="{ opened: envPanel.water }"
                  @click="shrinkbtnClick(2)"
                ></div>
              </div>
              <div class="content" v-show="envPanel.water">
                <div class="env-item">
                  <div class="item-title">上游水位</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.upstreamWaterZ"
                          :min="2000"
                          :max="4500"
                          :step="100"
                          @change="upstreamWaterZChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.upstreamWaterZ"
                          :min="2000"
                          :max="4500"
                          :step="100"
                          :title="waterSurface.upstreamWaterZ.toString()"
                          @change="upstreamWaterZChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">下游水位</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.downstreamWaterZ"
                          :min="2000"
                          :max="5500"
                          :step="100"
                          @change="downstreamWaterZChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.downstreamWaterZ"
                          :min="2000"
                          :max="5500"
                          :step="100"
                          :title="waterSurface.downstreamWaterZ.toString()"
                          @change="downstreamWaterZChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">水面颜色</div>
                  <div class="item-btns">
                    <div class="subitem">
                      <a-row>
                        <a-col :span="18">
                          <sketchPicker @change="changeColor2"> </sketchPicker>
                        </a-col>
                        <a-col :span="6">
                          {{ waterSurface.waterColourDark }}
                        </a-col>
                      </a-row>
                    </div>
                  </div>
                  <!-- <div class="item-btns">
                    <div class="subitem">
                      <a-row>
                        <a-col :span="18">
                          <sketchPicker @change="changeColor"></sketchPicker>
                        </a-col>
                        <a-col :span="6">
                          {{ waterSurface.waterColourLight }}
                        </a-col>
                      </a-row>
                    </div>
                  </div> -->
                </div>
                <div class="env-item">
                  <div class="item-title">水面透明度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.waveOpacity"
                          :min="1"
                          :max="2"
                          :step="0.1"
                          @change="waveOpacityChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.waveOpacity"
                          :min="1"
                          :max="2"
                          :step="0.1"
                          @change="waveOpacityChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">波纹速度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.waveNormalSpeed"
                          :min="-50"
                          :max="50"
                          :step="0.01"
                          @change="waveNormalSpeedChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.waveNormalSpeed"
                          :min="-50"
                          :max="50"
                          :step="0.01"
                          @change="waveNormalSpeedChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <!-- <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.waveSpeed"
                          :min="-50"
                          :max="50"
                          :step="0.01"
                          @change="waveSpeedChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.waveSpeed"
                          :min="-50"
                          :max="50"
                          :step="0.01"
                          @change="waveSpeedChange"
                        />
                      </a-col>
                    </a-row>
                  </div> -->
                </div>
                <div class="env-item">
                  <div class="item-title">波纹大小</div>
                  <!--<div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.largerRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="largerRipplesChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.largerRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="largerRipplesChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.mediumRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="mediumRipplesChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.mediumRipples"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="mediumRipplesChange"
                        />
                      </a-col>
                    </a-row>
                  </div>-->
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.smallerRipples"
                          :min="1"
                          :max="10"
                          :step="0.1"
                          @change="smallerRipplesChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.smallerRipples"
                          :min="1"
                          :max="10"
                          :step="0.1"
                          @change="smallerRipplesChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                </div>
                <div class="env-item">
                  <div class="item-title">波纹强度</div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.normalLargeIntensity"
                          :min="1"
                          :max="10"
                          :step="0.1"
                          @change="normalLargeIntensityChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.normalLargeIntensity"
                          :min="1"
                          :max="10"
                          :step="0.1"
                          @change="normalLargeIntensityChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <!-- <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.normalMedIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalMedIntensityChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.normalMedIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalMedIntensityChange"
                        />
                      </a-col>
                    </a-row>
                  </div>
                  <div class="item-btns">
                    <a-row>
                      <a-col :span="18">
                        <a-slider
                          v-model="waterSurface.normalSmallIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalSmallIntensityChange"
                        />
                      </a-col>
                      <a-col :span="6">
                        <a-input-number
                          v-model="waterSurface.normalSmallIntensity"
                          :min="-50"
                          :max="50"
                          :step="0.1"
                          @change="normalSmallIntensityChange"
                        />
                      </a-col>
                    </a-row>
                  </div> -->
                </div>
              </div>
            </div>
            <div class="data-item">
              <div class="title">
                <span>其他设置</span>
                <div
                  class="shrinkbtn"
                  :class="{ opened: envPanel.other }"
                  @click="shrinkbtnClick(3)"
                ></div>
              </div>
              <div class="content" v-show="envPanel.other"></div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mc-bottom">
      <div
        class="type-item type-item-1"
        :data-id="DEVICETYPE.XSZ"
        ref="item1"
        @click="deviceTypeChangeHandle"
      >
        <span class="text">泄水闸</span>
      </div>
      <div
        class="type-item type-item-2"
        :data-id="DEVICETYPE.CZ"
        ref="item2"
        @click="deviceTypeChangeHandle"
      >
        <span class="text">船闸</span>
      </div>
      <div
        class="type-item type-item-3"
        :data-id="DEVICETYPE.SLFDJZ"
        ref="item3"
        @click="deviceTypeChangeHandle"
      >
        <div class="item-left"></div>
        <div class="item-right">
          <span class="text">水轮发电机组</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import waterdatas from "@/datas/water.json";
import * as echarts from "echarts";
import ChartBlock from "@components/ChartBlock";
import SketchPicker from "@components/MySketchPicker";
import xszdevice from "@/datas/xszdevice.json";

/**选择状态 */
let ChoosedStatus = {
  //未选择
  unchoosed: 0,
  //选择中
  choosing: 1,
  //已选择
  choosed: 2
};

/**执行状态 */
let ExecuteStatus = {
  //未开始
  unstart: 0,
  //进行中
  running: 1,
  //已完成
  finished: 2
};

const _UPSTREAM_WATER_CODE = "S_SYSM_001";
const _DOWNSTREAM_WATER_CODE = "S_XYSM_002";

export default {
  name: "SimulationManage",
  components: {
    ChartBlock: ChartBlock,
    SketchPicker: SketchPicker
  },
  data() {
    return {
      ChoosedStatus: ChoosedStatus,
      ExecuteStatus: ExecuteStatus,

      upstreamWaterCode: _UPSTREAM_WATER_CODE,
      downstreamWaterCode: _DOWNSTREAM_WATER_CODE,

      // 上往下：
      // left1:S_XZSRZM2:(X=-18935.064453,Y=1254.089722,Z=3664.242676)
      // right1:S_XZSRZM1:(X=-21232.541016,Y=1258.000000,Z=3664.242676)

      // left2:S_XZSRZM4:(X=-18935.068359,Y=22054.091797,Z=3664.242676)
      // right2:S_XZSRZM3:(X=-21232.542969,Y=22054.089844,Z=3664.242676)

      // 下往上：
      // left1:S_XZSRZM3:(X=-21232.542969,Y=22054.089844,Z=3664.242676)
      // right1:S_XZSRZM4:(X=-18935.068359,Y=22054.091797,Z=3664.242676)

      // left2:S_XZSRZM1:(X=-21232.541016,Y=1258.000000,Z=3664.242676)
      // right2:S_XZSRZM2:(X=-18935.064453,Y=1254.089722,Z=3664.242676)

      //过船闸闸门
      czList: [
        {
          checked: false,
          isup: true,
          title: "往下游",
          disabled: false,
          //上游闸门
          zm: [
            //第一道闸门，左侧
            {
              isup: false,
              code: "S_XZSRZM2",
              rotateParam: { yaw: 75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            },
            //第一道闸门，右侧
            {
              code: "S_XZSRZM1",
              //打开旋转后的目标值
              rotateParam: { yaw: -75, pitch: 0, roll: 0 },
              //关闭还原时的目标值
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            }
          ],
          //下游闸门
          zm2: [
            //第二道闸门，左侧
            {
              code: "S_XZSRZM4",
              rotateParam: { yaw: 75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 },
              //闸门开关时的占用 中间区域的y
              usedLocation: [
                {
                  x: -18706.322266,
                  y: 20578.765625,
                  z: 4659.240723
                },
                {
                  x: -18706.322266,
                  y: 22070.833984,
                  z: 4659.240723
                }
              ]
            },
            //第二道闸门，右侧
            {
              code: "S_XZSRZM3",
              rotateParam: { yaw: -75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 },
              //闸门开关时的占用 中间区域的y
              usedLocation: [
                {
                  x: -21267.513672,
                  y: 20634.935547,
                  z: 4659.210449
                },
                {
                  x: -21267.513672,
                  y: 22070.833984,
                  z: 4659.210938
                }
              ]
            }
          ],
          water: {
            //上游水位
            targetCode: _UPSTREAM_WATER_CODE,
            // targetWaterZ: 4352,
            //中间水位
            code: "S_ZSSM_01",
            // //手动设置一个水位差值
            // vectorZ: -205,
            //下游水位
            targetCode2: _DOWNSTREAM_WATER_CODE
          },
          //系船柱第一艘船的位置
          boardLocation: {
            x: -23964.570312,
            y: -24871.861328,
            z: 4087.851074,
            spacey: -4593
          },
          //初始化时的视角参数，排队时系船柱视角
          locationParam: {
            location: {
              x: -23512.02734375,
              y: -50143.73828125,
              z: 9432.2568359375
            },
            pitch: -20.242582321166992,
            yaw: 92.52143096923828
          },
          //移动的第一个点位置
          oldLocation: {
            x: -23696.972656,
            y: -24146.587891,
            z: 4087.851318,
            //旋转角度
            rotateX: 0,
            rotateY: 0,
            rotateZ: -15
          },
          //闸门口的点位置
          secondLocation: {
            x: -20047.966797,
            y: -9931.181641,
            z: 4036.533447,
            duration: 10,
            //旋转角度
            rotateX: 0,
            rotateY: 0,
            rotateZ: 15
          },
          movetoLocation: {
            x: -19958.248047,
            y: 98220.75,
            z: 3688.205811,
            duration: 20
          },
          thirdLocationDuration: 15
        },
        {
          checked: false,
          isup: false,
          title: "往上游",
          disabled: false,
          //闸门
          zm: [
            //第一道闸门，左侧
            {
              code: "S_XZSRZM3",
              rotateParam: { yaw: -75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 },
              //闸门开关时的占用 中间区域的y
              usedLocation: [
                {
                  x: -21267.513672,
                  y: 20634.935547,
                  z: 4659.210449
                },
                {
                  x: -21267.513672,
                  y: 22070.833984,
                  z: 4659.210938
                }
              ]
            },
            //第一道闸门，右侧
            {
              code: "S_XZSRZM4",
              rotateParam: { yaw: 75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 },
              //闸门开关时的占用 中间区域的y
              usedLocation: [
                {
                  x: -18706.322266,
                  y: 20578.765625,
                  z: 4659.240723
                },
                {
                  x: -18706.322266,
                  y: 22070.833984,
                  z: 4659.240723
                }
              ]
            }
          ],
          zm2: [
            //第二道闸门，左侧
            {
              code: "S_XZSRZM1",
              rotateParam: { yaw: -75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 },
              location: { x: -21232.541016, y: 1254.09082, z: 3664.242676 }
            },
            //第二道闸门，右侧
            {
              code: "S_XZSRZM2",
              rotateParam: { yaw: 75, pitch: 0, roll: 0 },
              rotateParam2: { yaw: 0, pitch: 0, roll: 0 }
            }
          ],
          water: {
            //上游水位
            targetCode: _DOWNSTREAM_WATER_CODE,
            // targetWaterZ: 4352,
            //中间水位
            code: "S_ZSSM_01",
            //手动设置一个水位差值
            vectorZ: 0,
            //下游水位
            targetCode2: _UPSTREAM_WATER_CODE
          },
          //系船柱第一艘船的位置
          boardLocation: {
            x: -23830.908203,
            y: 46559.332031,
            z: 3016.287109,
            spacey: 4593
          },
          //初始化时的视角参数，排队时系船柱视角
          locationParam: {
            location: {
              x: -20704.5,
              y: 66956,
              z: 9265.5146484375
            },
            pitch: -18.138330459594727,
            yaw: -78.68638610839844
          },
          //移动的第一个点位置
          oldLocation: {
            //(X=-23830.908203,Y=46559.332031,Z=3557.564453)
            x: -23830.908203,
            y: 46559.332031,
            z: 3557.564453,

            //旋转角度
            rotateX: 0,
            rotateY: 0,
            rotateZ: 15
          },
          secondLocation: {
            x: -20121.865234,
            y: 34264.535156,
            z: 3557.656738,
            duration: 10,
            //旋转角度
            rotateX: 0,
            rotateY: 0,
            rotateZ: -15
          },
          movetoLocation: {
            // (X=-19745.109375,Y=-73866.898438,Z=4189.965820)
            x: -19745.109375,
            y: -73866.898438,
            z: 4189.96582,
            duration: 25
          },
          thirdLocationDuration: 15
        }
      ],

      //过船闸模拟
      locksObj: {
        //往上游
        isup: false,
        //往下游
        isdown: false,
        //是否可以进行模拟
        enable: false,
        //船是否选中
        choosed: false,

        //执行状态
        execteStatus: ExecuteStatus.unstart,

        //标识当前是否处于框选状态中
        pointenable: false,
        pointcodes: {},
        //船列表
        boards: [
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0001",
            name: "海华0001",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "中型",
            //尺寸占用中间等待区的单元格子数量
            num: 3,
            ue4id: "SM_Ship01",
            //船只方向，是否向下
            isup: true
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0002",
            name: "海华0002",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "小型",
            num: 2,
            ue4id: "SM_Ship02",
            //船只方向，是否向下
            isup: true
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0003",
            name: "海华0003",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "中型",
            num: 3,
            ue4id: "SM_Ship03",
            //船只方向，是否向下
            isup: true
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0004",
            name: "海华0004",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "小型",
            num: 2,
            ue4id: "SM_Ship04",
            //船只方向，是否向下
            isup: true
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0005",
            name: "海华0005",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "大型",
            num: 4,
            ue4id: "SM_Ship05",
            //船只方向，是否向下
            isup: true
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0006",
            name: "海华0006",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "大型",
            num: 4,
            ue4id: "SM_Ship06",
            //船只方向，是否向下
            isup: true
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0007",
            name: "海华0007",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "中型",
            num: 3,
            ue4id: "SM_Ship11",
            //船只方向，是否向下
            isup: false
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0008",
            name: "海华0008",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "小型",
            num: 2,
            ue4id: "SM_Ship12",
            //船只方向，是否向下
            isup: false
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0009",
            name: "海华0009",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "大型",
            num: 4,
            ue4id: "SM_Ship13",
            //船只方向，是否向下
            isup: false
          },
          {
            //船是否选中
            choosed: ChoosedStatus.unchoosed,
            code: "0010",
            name: "海华0010",
            size: "56.50*12.57",
            type: "货轮",
            sizetype: "中型",
            num: 3,
            ue4id: "SM_Ship14",
            //船只方向，是否向下
            isup: false
          }
        ],

        //船闸位置数量
        itemnum: 11,

        //等待区每块间的Y差距
        perAreaY: null
      },

      //水轮发电机组
      slfdjzList: [
        {
          //1号机组
          code: 1,
          title: "1#闸门",
          checked: false,
          //视角参数
          locationParam: {
            location: {
              x: -4732.5888671875,
              y: 1009.7889404296875,
              z: 2731.275390625
            },
            pitch: -6.175016403198242,
            yaw: -75.66038513183594
          },
          //闸门
          zm: [
            {
              code: "S_JSKJXM_07",
              moveParam: {
                x: 0,
                y: 0,
                z: 700
              }
            },
            {
              code: "S_JSKJXM_08",
              moveParam: { x: 0, y: 0, z: 700 }
            }
          ],
          //水花效果id
          watercode: "Niagara_ShorlineFoam_1",
          watercodes: ["Niagara_ShorlineFoam_1", "Niagara_ShorlineFoam_11"],
          //下游水位id
          targetwatercode: _DOWNSTREAM_WATER_CODE,
          //中心标准物code
          centercode: "S_JSKZGQ_01",
          //总体水花id
          allwatercode: "Niagara_ShorlineFoam_5",
          //水轮发电机叶片ue4code
          leafcode: "SM_FDJZ_25"
        },
        {
          //2号机组
          code: 2,
          title: "2#闸门",
          checked: false,
          //视角参数
          locationParam: {
            location: {
              x: -4732.5888671875,
              y: 1009.7889404296875,
              z: 2731.275390625
            },
            pitch: -6.175016403198242,
            yaw: -75.66038513183594
          },
          //闸门
          zm: [
            {
              code: "S_JSKJXM_06",
              moveParam: {
                x: 0,
                y: 0,
                z: 700
              }
            },
            {
              code: "S_JSKJXM_05",
              moveParam: { x: 0, y: 0, z: 700 }
            }
          ],
          //水花效果id
          watercode: "Niagara_ShorlineFoam_2",
          watercodes: ["Niagara_ShorlineFoam_2", "Niagara_ShorlineFoam_12"],
          //下游水位id
          targetwatercode: "S_XYSM_002",
          //中心标准物code
          centercode: "S_JSKZGQ_02",
          //总体水花id
          allwatercode: "Niagara_ShorlineFoam_5",
          //水轮发电机叶片ue4code
          leafcode: "SM_FDJZ_146"
        },
        {
          //3号机组
          code: 3,
          title: "3#闸门",
          checked: false,
          //视角参数
          locationParam: {
            location: {
              x: -4732.5888671875,
              y: 1009.7889404296875,
              z: 2731.275390625
            },
            pitch: -6.175016403198242,
            yaw: -75.66038513183594
          },
          //闸门
          zm: [
            {
              code: "S_JSKJXM_04",
              moveParam: {
                x: 0,
                y: 0,
                z: 700
              }
            },
            {
              code: "S_JSKJXM_03",
              moveParam: { x: 0, y: 0, z: 700 }
            }
          ],
          //水花效果id
          watercode: "Niagara_ShorlineFoam_3",
          watercodes: ["Niagara_ShorlineFoam_3", "Niagara_ShorlineFoam_13"],
          //下游水位id
          targetwatercode: "S_XYSM_002",
          //中心标准物code
          centercode: "S_JSKZGQ_03",
          //总体水花id
          allwatercode: "Niagara_ShorlineFoam_5",
          //水轮发电机叶片ue4code
          leafcode: "SM_FDJZ_173"
        },
        {
          //4号机组
          code: 4,
          title: "4#闸门",
          checked: false,
          //视角参数
          locationParam: {
            location: {
              x: -4732.5888671875,
              y: 1009.7889404296875,
              z: 2731.275390625
            },
            pitch: -6.175016403198242,
            yaw: -75.66038513183594
          },
          //闸门
          zm: [
            {
              code: "S_JSKJXM_02",
              moveParam: {
                x: 0,
                y: 0,
                z: 700
              }
            },
            {
              code: "S_JSKJXM_01",
              moveParam: { x: 0, y: 0, z: 700 }
            },
            {
              code: "S_WSZM_04",
              moveParam: { x: 0, y: 0, z: 1600 }
            }
          ],
          //水花效果id
          watercode: "Niagara_ShorlineFoam_4",
          watercodes: ["Niagara_ShorlineFoam_4", "Niagara_ShorlineFoam_14"],
          //下游水位id
          targetwatercode: "S_XYSM_002",
          //中心标准物code
          centercode: "S_JSKZGQ_04",
          //总体水花id
          allwatercode: "Niagara_ShorlineFoam_5",
          //水轮发电机叶片ue4code
          leafcode: "SM_FDJZ_200"
        }
      ],
      //当前设备类型
      activeDevice: 1,
      //闸门数量
      receiveOption: null,
      bpOption: null,
      value2: null,
      opennessInfo: [],
      valueData: [],
      materialStock: {
        total: "1761件",
        curmonthOut: "171件",
        curmonthIn: "76件"
      },
      waterOption: null,
      //水粒子效果的id
      fluxWaterCode:
        "NODE_AddChildActorComponent-2_BP_FluxSurface_Default_C_CAT_16",
      //泄水闸打开最大角度
      maxangle: 40,
      //flux水流样式
      maxStyle: {
        volume: 5,
        speedX: 0,
        speedY: 2,
        edge: 10,
        intensity: 1,
        duration: -1
      },
      minStyle: {
        volume: 0,
        speedX: 0,
        speedY: 0,
        edge: 0,
        intensity: 0,
        duration: -1
      },
      //水面
      waterSurface: {
        //上游水位
        upstreamWaterZ: 0,
        //下游水位
        downstreamWaterZ: 0,
        oldDownstreamWaterZ: 0,

        waterColourDark: "#005339FF",
        waveNormalSpeed: -2,
        waveSpeed: 0,
        largerRipples: 2,
        mediumRipples: 4,
        smallerRipples: 0,
        normalLargeIntensity: 0.05,
        normalMedIntensity: 0.05,
        normalSmallIntensity: 1,
        //水面透明度
        waveOpacity: 2
      },
      //光照
      light: {
        code: "DirectionalLight",
        //是否黑夜
        isnight: false,
        //强度
        strength: 1,
        //时间
        times: 9.6,
        //垂直角度
        verticalAngle: 0,
        //水平角度
        horizontalAngle: 0
      },
      //天气
      weather: {
        curweather: "2"
      },
      //设置面板显示、隐藏
      envPanel: {
        weather: true,
        water: false,
        other: false
      },
      //天气类型
      WEATHERTYPE: {
        CLOUDY: "1",
        SUNNY: "2",
        RAINY: "3",
        SNOWY: "4"
      },
      //设备类型
      DEVICETYPE: {
        XSZ: 1,
        CZ: 2,
        SLFDJZ: 3
      }
    };
  },
  methods: {
    //开始船闸模拟
    startLocksMock(cz) {
      this.locksObj.execteStatus = ExecuteStatus.running;
      let ue4Viewer = this.ue4Viewer;

      let choosedboards = this.choosedboard;
      let len = choosedboards.length;

      //计算每艘船在中间等待区的位置
      let left1code = cz.zm[0].code;
      let left2code = cz.zm2[0].code;
      let right1code = cz.zm[1].code;
      let right2code = cz.zm2[1].code;
      //计算中间等待期的每个之间的Y的差距
      this.computePerY(cz, {
        left1code,
        left2code,
        right1code,
        right2code
      });

      //获取上游水位的位置
      ue4Viewer.get(cz.water.targetCode, e => {
        //位置-高度z
        let z = e.axis.z;
        // if (e.boxExtent.z > 0) {
        //   z = e.location.z + e.boxExtent.z;
        // }

        //移动中间水位
        ue4Viewer.get(cz.water.code, e2 => {
          console.log("中间水位code2", cz.water.code);
          let p = {
            x: e2.axis.x,
            y: e2.axis.y,
            z: z //上游水位z值
          };
          //手动设置一个差值
          if (cz.water.vectorZ && cz.water.vectorZ != 0) {
            p.z = p.z + cz.water.vectorZ;
          }

          console.log(cz.water.code, e, e2, p);
          ue4Viewer.objectMoveTo(cz.water.code, p);
        });

        //打开闸门
        setTimeout(() => {
          for (let i = 0; i < cz.zm.length; i++) {
            const zm = cz.zm[i];
            ue4Viewer.objectRotateTo(zm.code, zm.rotateParam);
          }
        }, 5 * 1000);

        setTimeout(() => {
          //船只移动到中间排队
          const zm = cz.zm[0];
          // //获取闸门的位置，以闸门位置为参照移动
          //移动船只
          for (let i = 0; i < len; i++) {
            const board = choosedboards[i]; //cz.boards[i];
            setTimeout(() => {
              ue4Viewer.get(board.ue4id, e2 => {
                let z2 = z;
                // if (e2.boxExtent.z != 0) {
                //   z2 = z2 + e2.boxExtent.z;
                // }

                //闸门口的点位置
                let p1 = {
                  x: cz.secondLocation.x,
                  y: cz.secondLocation.y,
                  // z: board.secondLocation.z,
                  z: z2
                };

                let p2 = {
                  x: board.thirdLocation.x,
                  y: board.thirdLocation.y,
                  z: z2
                };
                console.log(board.code, e2, p2);

                //旋转°
                let p3 = {
                  yaw: cz.oldLocation.rotateZ,
                  pitch: cz.oldLocation.rotateY,
                  roll: cz.oldLocation.rotateX
                };
                ue4Viewer.objectRotate(board.ue4id, p3, 1);
                //移动到闸门口
                ue4Viewer.objectMoveTo(
                  board.ue4id,
                  p1,
                  cz.secondLocation.duration
                );

                setTimeout(() => {
                  let p4 = {
                    yaw: cz.secondLocation.rotateZ,
                    pitch: cz.secondLocation.rotateY,
                    roll: cz.secondLocation.rotateX
                  };
                  ue4Viewer.objectRotate(board.ue4id, p4, 1);

                  ue4Viewer.objectMoveTo(
                    board.ue4id,
                    p2,
                    cz.thirdLocationDuration
                  );
                }, cz.secondLocation.duration * 1000);
              });
            }, i * 5 * 1000);
          }
        }, 5 * 1000);

        //所有船只都进入排队后，才关闭闸门
        //移动中间水位+打开闸门+最后只船开始移动的时间间隔+起点到闸门口的时间+闸门口到中间等待区的时间
        let d2 = 5 + 5 + (len - 1) * 5 + 5 + cz.thirdLocationDuration; //

        //关闭闸门
        setTimeout(() => {
          for (let i = 0; i < cz.zm.length; i++) {
            const zm = cz.zm[i];
            ue4Viewer.objectRotateTo(zm.code, zm.rotateParam2);
          }
        }, d2 * 1000);
      });

      //所有船只都排队后，才下降水位
      let d3 = 20 + len * 5 + cz.secondLocation.duration; //排队出发多少s

      //获取下游水位的高度
      setTimeout(() => {
        ue4Viewer.get(cz.water.targetCode2, e => {
          console.log(cz.water.targetCode2, e);

          //降低中间水位
          let z = e.axis.z;
          // if (e.boxExtent.z > 0) {
          //   z = e.location.z + e.boxExtent.z;
          // }
          ue4Viewer.get(cz.water.code, e2 => {
            let p = {
              x: e2.axis.x,
              y: e2.axis.y,
              z: z //上游水位z值
            };
            // //手动设置一个差值
            // if (cz.water.vectorZ && cz.water.vectorZ != 0) {
            //   p.z = p.z + cz.water.vectorZ;
            // }

            ue4Viewer.objectMoveTo(cz.water.code, p, 2);
          });

          //降低船只z值
          for (let i = 0; i < len; i++) {
            const board = this.choosedboard[i];
            console.log("board", board, this.locksObj.pointcodes[board.code]);

            ue4Viewer.get(board.ue4id, e2 => {
              let p = {
                x: e2.axis.x,
                y: e2.axis.y,
                z: z //上游水位z值
              };

              ue4Viewer.objectMoveTo(board.ue4id, p, 2);
            });
          }

          //打开下游闸门
          setTimeout(() => {
            for (let i = 0; i < cz.zm2.length; i++) {
              const zm = cz.zm2[i];
              ue4Viewer.objectRotateTo(zm.code, zm.rotateParam);
            }
          }, 5 * 1000);

          //船只移动去远方
          setTimeout(() => {
            for (let i = 0; i < len; i++) {
              const board = this.choosedboard[i];

              setTimeout(() => {
                ue4Viewer.get(board.ue4id, e2 => {
                  let p = {
                    x: cz.movetoLocation.x,
                    y: cz.movetoLocation.y,
                    z: z //上游水位z值
                  };

                  ue4Viewer.objectMoveTo(
                    board.ue4id,
                    p,
                    cz.movetoLocation.duration
                  );
                });
              }, i * 5 * 1000);

              if (i == len - 1) {
                //所有船只出去后，才关闭闸门
                let movetoLocation = cz.movetoLocation.duration;
                let d4 = i * 5 + 10; //

                //关闭闸门
                setTimeout(() => {
                  for (let j = 0; j < cz.zm2.length; j++) {
                    const zm = cz.zm2[j];
                    ue4Viewer.objectRotateTo(zm.code, zm.rotateParam2);
                  }
                }, d4 * 1000);
              }

              //隐藏船只
              let d3 = i * 5 + cz.movetoLocation.duration;
              setTimeout(() => {
                ue4Viewer.hide(board.ue4id);

                if (i == len - 1) {
                  this.locksObj.execteStatus = ExecuteStatus.finished;
                  //设置可点击
                  this.setCzDisabled(false);
                  //数据置空初始化还原
                }
              }, d3 * 1000);
            }

            // let movetoDurations = cz.boards.map(
            //   (x) => x.movetoLocation.duration
            // );
            // let d3 = len * 5 + Math.max(...movetoDurations); //排队出发多少s
          }, 10 * 1000);
        });
      }, d3 * 1000);
    },
    /**
     * 通过闸门计算系船柱的位置，同时计算每艘船的位置
     * left1code：行进方向的左侧第一个闸门，如：
     * left2code：行进方向的左侧第二个闸门
     */
    computePerY(cz, zmobj) {
      let ue4Viewer = this.ue4Viewer;
      //S_XZSRZM2、S_XZSRZM4 S_XZSRZM1、S_XZSRZM3
      let { left1code, left2code, right1code, right2code } = zmobj;

      let itemnum = this.locksObj.itemnum;

      //计算闸门占用中间等待区的长度
      let zms = cz.zm2; // [...cz.zm, ...cz.zm2];
      let usedY = 0;
      for (let i = 0; i < zms.length; i++) {
        const zm = zms[i];
        if (zm.usedLocation && zm.usedLocation.length == 2) {
          usedY = Math.abs(zm.usedLocation[0].y - zm.usedLocation[1].y);
          break;
        }
      }

      //左侧1
      ue4Viewer.get(left1code, e1 => {
        //位置-y
        let y1 = e1.axis.y;
        // if (e1.boxExtent.y > 0) {
        //   y1 = e1.location.y + e1.boxExtent.y;
        // }

        //右侧1
        ue4Viewer.get(right1code, e2 => {
          //位置-y
          // let y2 = e2.axis.y;
          // if (e2.boxExtent.y > 0) {
          //   y2 = e2.location.y + e2.boxExtent.y;
          // }

          //左侧2
          ue4Viewer.get(left2code, e3 => {
            //位置-y
            let y3 = e3.axis.y;
            // if (e3.boxExtent.y > 0) {
            //   y3 = e3.location.y + e3.boxExtent.y;
            // }

            //3 - 3 - (门位置)
            let perY = (Math.abs(y3 - y1) - usedY) / itemnum;
            //起始位置
            let startY = y3; // - usedY;
            if (y3 < y1) {
              startY = y3 + usedY;
            }

            console.log(left2code, "e1", e1, "e3", e3, "perY", perY);

            this.locksObj.perAreaY = perY;

            // 计算没搜船在中间等待区的位置y
            let boardObjs = [];
            for (let i = 0; i < this.choosedboard.length; i++) {
              let board = this.choosedboard[i];
              let pointcodes = this.locksObj.pointcodes[board.code];

              let index = 0;
              if (board.num % 2 === 0) {
                index = Math.floor(board.num / 2) - 1;

                let centercode = parseInt(pointcodes[index]);
                if (centercode > itemnum) {
                  centercode = centercode - itemnum;
                  //是否在右侧
                  board.isRight = true;
                } else {
                  board.isRight = false;
                }
                index = Math.floor(centercode);
              } else {
                index = Math.floor(board.num / 2);
                let centercode = parseInt(pointcodes[index]);
                if (centercode > itemnum) {
                  centercode = centercode - itemnum;
                  //是否在右侧
                  board.isRight = true;
                } else {
                  board.isRight = false;
                }
                index = Math.floor(centercode) - 0.5;
              }
              let y;
              if (y3 < y1) {
                y = startY + index * perY;
              } else {
                y = startY - index * perY;
              }
              if (!board.isRight) {
                board.thirdLocation = {
                  x: e1.location.x, //和闸门x一样
                  y: y, //远处闸门y-间隔的y
                  z: 0
                };
              } else {
                board.thirdLocation = {
                  x: e2.location.x, //和闸门x一样
                  y: y, //远处闸门y-间隔的y
                  z: 0
                };
              }
              console.log(
                "计算船只的位置",
                usedY,
                startY,
                board.code,
                board.thirdLocation.y,
                board.num,
                pointcodes,
                index
              );
              boardObjs[board.code] = board.thirdLocation;
            }
            console.log(boardObjs, this.choosedboard);
          });
        });
      });
    },

    //隐藏船只位置
    hideBoardPosition() {
      let ue4Viewer = this.ue4Viewer;
      //将所有的船只进行隐藏
      let boardids = this.locksObj.boards.map(x => x.ue4id);
      ue4Viewer.hide(boardids);
    },

    //初始化船的位置
    initBoardPosition(cz) {
      let ue4Viewer = this.ue4Viewer;

      //设置船只的位置
      //获取水面高度
      ue4Viewer.get(cz.water.targetCode, e => {
        //将选中的船进行显示排列
        for (let i = 0; i < this.choosedboard.length; i++) {
          const board = this.choosedboard[i];
          let location = {
            x: cz.boardLocation.x,
            y: cz.boardLocation.y + i * cz.boardLocation.spacey,
            z: e.axis.z
          };
          ue4Viewer.objectMoveTo(board.ue4id, location, 0);
          //如果船闸方向和船只方向不对，旋转180度
          if (cz.isup != board.isup) {
            ue4Viewer.objectRotate(
              board.ue4id,
              { yaw: 180, pitch: 0, roll: 0 },
              0
            );
            board.isup = cz.isup;
          }
        }
        ue4Viewer.show(this.choosedboard.map(x => x.ue4id));
      });
    },
    //开始执行
    startExecute(e) {
      //开始执行过程中，不允许再次执行
      if (this.locksObj.execteStatus === ExecuteStatus.running) {
        return;
      }
      //设置往上下游船闸的按钮不可用
      this.setCzDisabled(true);
      //判断是否有船只排队，可进行模拟
      if (!this.judgeBoardCanExecute()) {
        return;
      }
      //开始模拟
      let cz = this.czList.find(x => x.checked);
      if (cz) {
        this.initBoardPosition(cz);
        this.startLocksMock(cz);
      }
    },
    //判断是否有船只排队，可进行模拟
    judgeBoardCanExecute() {
      return this.choosedboard.length > 0;
    },
    //鼠标按下时
    pointitemMousedownHandle(e) {
      console.log("e1", e, this.locksObj.pointcodes);
      let boardcode = this.choosingboardcode;
      let pointcodes = this.locksObj.pointcodes[boardcode] || [];

      //当前item是否具备boardcode
      let curboard = e.target.dataset.board;

      if (this.choosingboard && pointcodes.length === 0 && !curboard) {
        this.locksObj.pointenable = true;
        this.pointitemSetChoosed(e);
      } else {
        this.locksObj.pointenable = false;
      }
    },
    //系船柱设置选中
    pointitemSetChoosed(e) {
      if (this.locksObj.pointenable) {
        let dataid = e.currentTarget.getAttribute("data-id");
        e.currentTarget.classList.add("choosed");

        if (this.choosingboard) {
          let boardcode = this.choosingboardcode;
          if (this.locksObj.pointcodes[boardcode]) {
            let dataids = this.locksObj.pointcodes[boardcode];
            dataids.push(dataid);
            //进行排序
            dataids = dataids.sort();
            this.locksObj.pointcodes[boardcode] = dataids;
          } else {
            this.locksObj.pointcodes[boardcode] = [dataid];
          }
          e.currentTarget.setAttribute("data-board", boardcode);
        }
      }
    },
    //系船柱框选
    pointitemMouseenterHandle(e) {
      console.log("pointitemMouseenterHandle", e);
      //判断是否已经选中过
      if (e.currentTarget.dataset.board) {
        return;
      }
      this.pointitemSetChoosed(e);
    },
    //系船柱子，鼠标弹起
    pointitemMouseupHandle(e) {
      console.log("e3", e);
      if (this.locksObj.pointenable) {
        this.locksObj.pointenable = false;
        let boardcode = this.choosingboard.code;
        let pointcodes = this.locksObj.pointcodes[boardcode] || [];

        //判断大小是否合适
        let judgeRes = this.judgeChoosedRight(pointcodes);
        if (!judgeRes.isOk) {
          this.$message.warning(judgeRes.msg);

          // let itemdom = e.currentTarget;
          this.pointitemCancleHandle(boardcode, false);

          return;
        }

        // console.log("pointcodes", this.locksObj.pointcodes, boardcode);

        //设置船只名称
        let index = 0;
        //判断当前框选中的格子是否是偶数
        if (pointcodes.length % 2 === 0) {
          index = Math.floor(pointcodes.length / 2) - 1;
        } else {
          index = Math.floor(pointcodes.length / 2);
        }
        let dataid = pointcodes[index];
        let choosedItem = document.querySelector(
          ".choosed[data-id='" + dataid + "']"
        );
        if (choosedItem && this.choosingboard) {
          let chooseddom = document.createElement("div");
          chooseddom.classList.add("choosedboard");
          if (pointcodes.length % 2 === 0) {
            chooseddom.classList.add("even");
          }

          let textdom = document.createElement("div");
          textdom.classList.add("boardtext");
          textdom.innerText = this.choosingboard.name;
          chooseddom.appendChild(textdom);

          let icondom = document.createElement("div");
          icondom.classList.add("cancelicon");
          icondom.addEventListener("click", e => {
            let itemdom = e.currentTarget.parentElement.parentElement;
            let boardcode = itemdom.getAttribute("data-board");
            if (!boardcode) {
              console.log("cancelicon click boardcode为空");
            }
            this.pointitemCancleHandle(boardcode);
          });
          chooseddom.appendChild(icondom);

          choosedItem.appendChild(chooseddom);
        }

        //首尾item添加样式
        let firstChoosedItem = document.querySelector(
          ".choosed[data-id='" + pointcodes[0] + "']"
        );
        firstChoosedItem.classList.add("first");
        let lastChoosedItem = document.querySelector(
          ".choosed[data-id='" + pointcodes[pointcodes.length - 1] + "']"
        );
        lastChoosedItem.classList.add("last");

        //移除左侧对应船只
        for (let i = 0; i < this.locksObj.boards.length; i++) {
          const board = this.locksObj.boards[i];
          if (board.code === this.choosingboardcode) {
            board.choosed = ChoosedStatus.choosed;
            this.$forceUpdate();
            break;
          }
        }
      }
    },
    //判断选择是否正常
    judgeChoosedRight(pointcodes) {
      //若横向选择，选择无效，提示：请选择单边系船柱
      let itemnum = this.locksObj.itemnum;
      let isleft;
      for (let i = 0; i < pointcodes.length; i++) {
        let pointcode = parseInt(pointcodes[i]);
        if (i === 0) {
          if (pointcode > itemnum) {
            isleft = false;
          } else {
            isleft = true;
          }
        }

        if (isleft === true || isleft === false) {
          if (isleft && pointcode > itemnum) {
            return { isOk: false, msg: "请选择单边系船柱!" };
          }
          if (!isleft && pointcode <= itemnum) {
            return { isOk: false, msg: "请选择单边系船柱!" };
          }
        }
      }

      //若选择空间数量与船型（大船3，中船2）不符，选择无效，提示：停泊位置与船型不符，请重新选择
      if (pointcodes.length != this.choosingboard.num) {
        return { isOk: false, msg: "停泊位置与船型不符，请重新选择!" };
      }
      return { isOk: true };
    },
    //系船柱点击
    pointitemClickHandle(e) {
      console.log("e4", e);
    },
    //系船柱默认取消
    pointitemCancleHandle(boardcode, isCancel = true) {
      let parentdom = document.querySelector(".point-list");
      if (parentdom) {
        let items = parentdom.querySelectorAll(".point-item");
        for (let i = 0; i < items.length; i++) {
          let dom = items[i];
          if (!boardcode || dom.getAttribute("data-board") === boardcode) {
            while (dom.firstChild) {
              dom.firstChild.remove();
            }
            dom.removeAttribute("data-board");
            dom.classList.remove("choosed");
            dom.classList.remove("first");
            dom.classList.remove("last");
          }
        }
      }

      this.locksObj.pointenable = false;
      if (boardcode) {
        this.locksObj.pointcodes[boardcode] = [];
      } else {
        this.locksObj.pointcodes = {};
      }
      //是否来自取消按钮
      if (isCancel) {
        //取消船只选择
        for (let i = 0; i < this.locksObj.boards.length; i++) {
          let board = this.locksObj.boards[i];
          if (!boardcode || board.code === boardcode) {
            board.choosed = ChoosedStatus.unchoosed;
          }
        }
      }
    },
    //船闸模拟：点击船
    itemChoosed(item) {
      item.choosed =
        item.choosed === ChoosedStatus.unchoosed
          ? ChoosedStatus.choosing
          : ChoosedStatus.unchoosed;
      this.locksObj.choosed = !this.locksObj.choosed;
      for (let i = 0; i < this.locksObj.boards.length; i++) {
        let board = this.locksObj.boards[i];
        if (board.code === item.code) {
          board.choosed = ChoosedStatus.choosing;
        } else {
          if (board.choosed === ChoosedStatus.choosing) {
            board.choosed = ChoosedStatus.unchoosed;
          }
        }
      }
      //设置初始值
      if (!this.locksObj.pointcodes[item.code]) {
        this.locksObj.pointcodes[item.code] = [];
      }
      // console.log(this.locksObj.boards);
    },
    //控制船闸模拟
    onCZChange(checked, cz) {
      let ue4Viewer = this.ue4Viewer;
      for (let i = 0; i < this.czList.length; i++) {
        let czitem = this.czList[i];
        if (czitem.title === cz.title) {
          czitem.checked = checked;
        } else {
          czitem.checked = false;
        }
      }
      console.log("this.czList", this.czList);
      //开闸
      if (checked) {
        //设置执行状态
        this.locksObj.execteStatus = ExecuteStatus.unstart;
        //初始化参数
        this.pointitemCancleHandle();
        this.locksObj.enable = true;
        //往下游
        if (cz.isup) {
          this.locksObj.isup = true;
          this.locksObj.isdown = false;
        }
        //往上游
        if (!cz.isup) {
          this.locksObj.isup = false;
          this.locksObj.isdown = true;
        }

        let param = cz.locationParam;
        //显示所有的船只
        // ue4Viewer.show(cz.boards.map(x => x.code));
        this.hideBoardPosition(cz);
        //视角切换，跳转
        ue4Viewer.flytoByParam(param);
      } else {
        this.locksObj.enable = false;
        //往下游
        if (cz.isup) {
          this.locksObj.isup = false;
        }
        //往上游
        if (!cz.isup) {
          this.locksObj.isdown = false;
        }
      }
      this.$forceUpdate();
    },
    //上游船闸
    onCZChange_old(checked, cz) {
      let ue4Viewer = this.ue4Viewer;
      //开闸
      if (checked) {
        //设置不可点击
        this.setCzDisabled(true);

        let param = cz.locationParam;
        //显示所有的船只
        ue4Viewer.show(cz.boards.map(x => x.code));
        //视角切换，跳转
        ue4Viewer.flytoByParam(param);

        let len = cz.boards.length;
        let duration = 0;

        //获取上游水位的位置
        ue4Viewer.get(cz.water.targetCode, e => {
          //位置-高度z
          let z = e.location.z;
          if (e.boxExtent.z > 0) {
            z = e.location.z + e.boxExtent.z;
          }

          //移动中间水位
          ue4Viewer.get(cz.water.code, e2 => {
            console.log("中间水位code2", cz.water.code);
            let p = {
              x: e2.location.x,
              y: e2.location.y,
              z: z //上游水位z值
            };
            //手动设置一个差值
            if (cz.water.vectorZ && cz.water.vectorZ != 0) {
              p.z = p.z + cz.water.vectorZ;
            }

            console.log(cz.water.code, e, e2, p);
            ue4Viewer.objectMoveTo(cz.water.code, p);
          });

          //打开闸门
          setTimeout(() => {
            for (let i = 0; i < cz.zm.length; i++) {
              const zm = cz.zm[i];
              ue4Viewer.objectRotateTo(zm.code, zm.rotateParam);
            }
          }, 5 * 1000);

          setTimeout(() => {
            //船只移动到中间排队
            const zm = cz.zm[0];
            // //获取闸门的位置，以闸门位置为参照移动
            // ue4Viewer.get(zm.code, (e) => {
            //移动船只
            for (let i = 0; i < len; i++) {
              const board = cz.boards[i];
              setTimeout(() => {
                ue4Viewer.get(board.code, e2 => {
                  let z2 = z;
                  // if (e2.boxExtent.z != 0) {
                  //   z2 = z2 + e2.boxExtent.z;
                  // }

                  //闸门口的点位置
                  let p1 = {
                    x: board.secondLocation.x,
                    y: board.secondLocation.y,
                    // z: board.secondLocation.z,
                    z: z2
                  };
                  let p2 = {
                    x: board.thirdLocation.x,
                    y: board.thirdLocation.y,
                    // z: board.movetoLocation.z,
                    z: z2
                  };
                  // console.log(cz.watercode, e2, p);

                  //旋转°
                  let p3 = {
                    yaw: board.oldLocation.rotateZ,
                    pitch: board.oldLocation.rotateY,
                    roll: board.oldLocation.rotateX
                  };
                  ue4Viewer.objectRotate(board.code, p3, 1);
                  //移动到闸门口
                  ue4Viewer.objectMoveTo(
                    board.code,
                    p1,
                    board.secondLocation.duration
                  );

                  setTimeout(() => {
                    let p4 = {
                      yaw: board.secondLocation.rotateZ,
                      pitch: board.secondLocation.rotateY,
                      roll: board.secondLocation.rotateX
                    };
                    ue4Viewer.objectRotate(board.code, p4, 1);

                    ue4Viewer.objectMoveTo(
                      board.code,
                      p2,
                      board.thirdLocation.duration
                    );
                  }, board.secondLocation.duration * 1000);
                });
              }, i * 5 * 1000);
            }

            // });
          }, 5 * 1000);

          //所有船只都进入排队后，才关闭闸门
          let thirdDurations = cz.boards.map(x => x.thirdLocation.duration);
          //移动中间水位+打开闸门+最后只船开始移动的时间间隔+起点到闸门口的时间+闸门口到中间等待区的时间
          let d2 = 5 + 5 + (len - 1) * 5 + 5 + Math.max(...thirdDurations); //

          //关闭闸门
          setTimeout(() => {
            for (let i = 0; i < cz.zm.length; i++) {
              const zm = cz.zm[i];
              ue4Viewer.objectRotateTo(zm.code, zm.rotateParam2);
            }
          }, d2 * 1000);
        });

        //所有船只都排队后，才下降水位
        let secondDurations = cz.secondLocation.duration;
        let d3 = 20 + len * 5 + cz.secondLocation.duration; //排队出发多少s

        //获取下游水位的高度
        setTimeout(() => {
          ue4Viewer.get(cz.water.targetCode2, e => {
            console.log(cz.water.targetCode2, e);

            //降低中间水位
            let z = e.location.z;
            if (e.boxExtent.z > 0) {
              z = e.location.z + e.boxExtent.z;
            }
            ue4Viewer.get(cz.water.code, e2 => {
              let p = {
                x: e2.location.x,
                y: e2.location.y,
                z: z //上游水位z值
              };
              //手动设置一个差值
              if (cz.water.vectorZ && cz.water.vectorZ != 0) {
                p.z = p.z + cz.water.vectorZ;
              }

              ue4Viewer.objectMoveTo(cz.water.code, p, 2);
            });

            //降低船只z值
            for (let i = 0; i < len; i++) {
              const board = cz.boards[i];

              ue4Viewer.get(board.code, e2 => {
                let p = {
                  x: e2.location.x,
                  y: e2.location.y,
                  z: z //上游水位z值
                };

                ue4Viewer.objectMoveTo(board.code, p, 2);
              });
            }

            //打开下游闸门
            setTimeout(() => {
              for (let i = 0; i < cz.zm2.length; i++) {
                const zm = cz.zm2[i];
                ue4Viewer.objectRotateTo(zm.code, zm.rotateParam);
              }
            }, 5 * 1000);

            //船只移动去远方
            setTimeout(() => {
              for (let i = 0; i < len; i++) {
                const board = cz.boards[i];

                setTimeout(() => {
                  ue4Viewer.get(board.code, e2 => {
                    let p = {
                      x: board.movetoLocation.x,
                      y: board.movetoLocation.y,
                      z: z //上游水位z值
                    };

                    ue4Viewer.objectMoveTo(
                      board.code,
                      p,
                      board.movetoLocation.duration
                    );
                  });
                }, i * 5 * 1000);

                if (i == len - 1) {
                  //所有船只出去后，才关闭闸门
                  let movetoLocation = cz.boards.map(
                    x => x.movetoLocation.duration
                  );
                  let d4 = i * 5 + 10; //

                  //关闭闸门
                  setTimeout(() => {
                    for (let j = 0; j < cz.zm2.length; j++) {
                      const zm = cz.zm2[j];
                      ue4Viewer.objectRotateTo(zm.code, zm.rotateParam2);
                    }
                  }, d4 * 1000);
                }

                //隐藏船只
                let d3 = i * 5 + board.movetoLocation.duration;
                setTimeout(() => {
                  ue4Viewer.hide(board.code);

                  if (i == len - 1) {
                    //设置可点击
                    this.setCzDisabled(false);
                  }
                }, d3 * 1000);
              }

              // let movetoDurations = cz.boards.map(
              //   (x) => x.movetoLocation.duration
              // );
              // let d3 = len * 5 + Math.max(...movetoDurations); //排队出发多少s
            }, 10 * 1000);
          });
        }, d3 * 1000);
      } else {
        this.initCZUe4();
        //关闸
      }
    },
    //水纹强度
    normalLargeIntensityChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        normalLargeIntensity: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    normalMedIntensityChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        normalMedIntensity: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    normalSmallIntensityChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        normalSmallIntensity: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    //水纹大小
    largerRipplesChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        largerRipples: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    mediumRipplesChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        mediumRipples: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    smallerRipplesChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        smallerRipples: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    //上游水位修改
    upstreamWaterZChange(value) {
      let ue4Viewer = this.ue4Viewer;
      let code = this.upstreamWaterCode;
      ue4Viewer.get(code, e => {
        let p = {
          x: e.location.x,
          y: e.location.y,
          z: value
        };
        console.log("upstreamWaterZChange", e, p);
        ue4Viewer.objectMoveTo(code, p);
      });
    },
    //下游水位修改
    downstreamWaterZChange(value) {
      let ue4Viewer = this.ue4Viewer;
      let code = this.downstreamWaterCode;
      ue4Viewer.get(code, e => {
        let p = {
          x: e.axis.x,
          y: e.axis.y,
          z: value
        };
        console.log("downstreamWaterZChange", e, p);
        ue4Viewer.objectMoveTo(code, p);
      });
    },
    //水面透明度
    waveOpacityChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        opacity: value
      });
    },
    //水纹速度修改修改
    waveSpeedChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        waveSpeed: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    //水纹速度修改修改
    waveNormalSpeedChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({
        waveNormalSpeed: value
        // waterColourDark: "#005339FF",
        // waterColourLight: "#A49AD0FF",
      });
    },
    //暗色切换时
    changeColor2(color) {
      let ue4Viewer = this.ue4Viewer;
      this.waterSurface.waterColourDark = color.hex;
      ue4Viewer.waterStyle({ waterColourDark: color.hex });
    },
    //亮色切换时
    changeColor(color) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.waterStyle({ waterColourLight: color.hex });
    },
    //天气切换
    weatherClick(type) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.changeWeather(type);
      this.weather.curweather = type;
      //阴天
      if (type == this.WEATHERTYPE.CLOUDY) {
      }
      //晴天
      if (type == this.WEATHERTYPE.SUNNY) {
      }
      //雨天
      if (type == this.WEATHERTYPE.RAINY) {
      }
      //雪天
      if (type == this.WEATHERTYPE.SNOWY) {
      }
    },
    //白天、黑夜切换
    changeDayNight(isday) {
      this.light.isnight = !isday;
      let ue4Viewer = this.ue4Viewer;
      if (isday) {
        ue4Viewer.show(this.light.code);
        ue4Viewer.changeWeather(this.weather.curweather);
      } else {
        ue4Viewer.hide(this.light.code);
        ue4Viewer.changeWeather(this.weather.curweather, 2400);
      }
    },
    //水轮发电机组
    onFDJChange(checked, item) {
      let ue4Viewer = this.ue4Viewer;
      //开闸
      if (checked) {
        let param = item.locationParam;
        // ue4Viewer.flytoByParam(param);
        // ue4Viewer.focus(item.zm[0].code, 1500);
        setTimeout(() => {
          //获取中心点的位置
          ue4Viewer.get(item.centercode, e => {
            for (let i = 0; i < item.zm.length; i++) {
              const zm = item.zm[i];
              ue4Viewer.get(zm.code, e2 => {
                console.log(
                  "onFDJChange",
                  item.centercode,
                  e,
                  e.location,
                  zm.moveParam
                );
                let ez = (e.location && e.location.z) || e2.location.z;
                let p = {
                  x: e2.location.x,
                  y: e2.location.y,
                  z: ez + zm.moveParam.z
                };
                ue4Viewer.objectMoveTo(zm.code, p);
              });
            }
          });
        }, 2000);

        setTimeout(() => {
          //显示水花
          let watercodes = [];
          if (Array.isArray(item.watercodes) && item.watercodes.length > 0) {
            watercodes = item.watercodes;
          } else {
            watercodes.push(item.watercode);
          }
          for (let i = 0; i < watercodes.length; i++) {
            const watercode = watercodes[i];
            ue4Viewer.show(watercode);
            // //如果所有的都开了，就打开5
            // let uncheckedItem = this.slfdjzList.find((x) => !x.checked);
            // if (!uncheckedItem) {
            //   ue4Viewer.show("Niagara_ShorlineFoam_5");
            // }
          }
        }, 3 * 1000);

        //模拟机组仿真
        ue4Viewer.sljSimulation(item.code, true);

        //关掉水轮发电机组
        ue4Viewer.waterTurbineRotate([item.leafcode]);
      } else {
        //关闸
        //获取中心点的位置
        ue4Viewer.get(item.centercode, e => {
          for (let i = 0; i < item.zm.length; i++) {
            const zm = item.zm[i];
            ue4Viewer.get(zm.code, e2 => {
              let p = {
                x: e2.location.x,
                y: e2.location.y,
                z: e.location.z - zm.moveParam.z
              };
              console.log(item.centercode, e, p);
              ue4Viewer.objectMoveTo(zm.code, p);
            });
          }
        });
        //显示水花
        let watercodes = [];
        if (Array.isArray(item.watercodes) && item.watercodes.length > 0) {
          watercodes = item.watercodes;
        } else {
          watercodes.push(item.watercode);
        }
        for (let i = 0; i < watercodes.length; i++) {
          const watercode = watercodes[i];
          ue4Viewer.hide(watercode);
        }
        // ue4Viewer.hide("Niagara_ShorlineFoam_5");
        //模拟机组仿真
        ue4Viewer.sljSimulation(item.code, false);
        //关掉水轮发电机组
        ue4Viewer.waterTurbineRotate([item.leafcode], false);
      }
    },
    setCzDisabled(disabled) {
      for (let i = 0; i < this.czList.length; i++) {
        const cz = this.czList[i];
        cz.disabled = disabled;
      }
    },
    //初始化船闸数据
    initCZUe4() {
      let ue4Viewer = this.ue4Viewer;
      let czList = this.czList;
      // for (let i = 0; i < czList.length; i++) {
      //   const cz = czList[i];
      //   for (let j = 0; j < cz.boards.length; j++) {
      //     const board = cz.boards[j];
      //     //将船移动到原始位置
      //     let p = {
      //       x: board.oldLocation.x,
      //       y: board.oldLocation.y,
      //       z: board.oldLocation.z
      //     };
      //     ue4Viewer.objectMoveTo(board.code, p, 0);
      //   }
      //   ue4Viewer.hide(cz.boards.map(x => x.code));
      // }

      //保持闸门关闭
    },
    //初始化上下游水面数据
    initWaterZ() {
      let ue4Viewer = this.ue4Viewer;
      //初始化上下游水面数据
      ue4Viewer.get(this.upstreamWaterCode, e => {
        console.log("初始化上下游水面数据", this.upstreamWaterCode, e);
        this.waterSurface.upstreamWaterZ = e.axis.z;
      });
      ue4Viewer.get(this.downstreamWaterCode, e => {
        this.waterSurface.downstreamWaterZ = e.axis.z;
        this.waterSurface.oldDownstreamWaterZ = e.axis.z;
      });
    },
    //展开、收缩切换
    shrinkbtnClick(e) {
      if (e == 1) {
        this.envPanel = {
          weather: !this.envPanel.weather,
          water: false,
          other: false
        };
      }
      if (e == 2) {
        this.envPanel = {
          weather: false,
          water: !this.envPanel.water,
          other: false
        };
      }
      if (e == 3) {
        this.envPanel = {
          weather: false,
          water: false,
          other: !this.envPanel.other
        };
      }
    },
    //光源强度修改
    lightStrengthChange(value) {
      //设置光照强度
      let ue4Viewer = this.ue4Viewer;
      let p = {
        intensity: value
      };
      ue4Viewer.setLight(this.light.code, p);
    },
    //光源角度修改
    lightTimesChange(value) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.changeWeather(this.weather.curweather, 100 * value);
    },
    //垂直角度修改
    verticalAngleChange(val) {
      let ue4Viewer = this.ue4Viewer;
      let code = this.light.code;
      ue4Viewer.get(code, e => {
        ue4Viewer.objectRotateTo(code, {
          yaw: val,
          pitch: e.rotate.pitch,
          roll: e.rotate.roll
        });
      });
    },
    //水平角度修改
    horizontalAngleChange(val) {
      let ue4Viewer = this.ue4Viewer;
      let code = this.light.code;
      ue4Viewer.get(code, e => {
        // ue4Viewer.objectRotateTo(this.light.code, zm.rotateParam);
        ue4Viewer.objectRotateTo(code, {
          yaw: e.rotate.yaw,
          pitch: val,
          roll: e.rotate.roll
        });
      });
    },
    //角度格式化
    angleFormatter(val) {
      return val + "°";
    },
    //获取下游水位
    getWaterLevel() {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.get("Actor_XSZ_05", e => {
        console.log("当前泄水闸", e);
      });
      ue4Viewer.get("BP_FluxModifierSourceActor05", e => {
        console.log("当前泄水闸flux2", e);
      });
    },
    //设置水平面
    setWaterLevel() {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.get("S_XYSM_001", e => {
        //移动水位
        ue4Viewer.get("BP_FluxSimulation_2", e2 => {
          ue4Viewer.objectMoveTo("S_XYSM_001", {
            // x: e.location.x,
            // y: e.location.y,
            z: e2.location.z
          });
        });
      });
    },
    //泄水闸分组切换
    groupChange(e, group) {
      let checked = e.target.checked;
      for (let i = 0; i < this.opennessInfo.length; i++) {
        const openness = this.opennessInfo[i];
        if (openness.group == group.title) {
          openness.checked = checked;
        }
      }
    },
    /**********滑动条 start************************************* */
    //滑条开合度操作修改
    opennessChange2(value, item) {
      this.focus(item.code);
      //联动
      let openness = this.opennessInfo.filter(x => x.checked);
      if (!item.checked) {
        openness.push(item);
      }
      for (let index = 0; index < openness.length; index++) {
        const element = openness[index];
        element.openness = value;
        element.openness2 = value;
      }
      this.opennessChangeHandle(value, openness);
    },
    //数字开合度操作修改，避免输入 80% 时，出现两次8->80开合
    opennessChange(e, item) {
      let value = item.openness2;
      item.openness = item.openness2;
      this.focus(item.code);
      //联动
      let openness = this.opennessInfo.filter(x => x.checked);
      if (!item.checked) {
        openness.push(item);
      }
      for (let index = 0; index < openness.length; index++) {
        const element = openness[index];
        element.openness = value;
        element.openness2 = value;
      }
      this.opennessChangeHandle(value, openness);
    },
    opennessChangeHandle(value, items) {
      let ue4Viewer = this.ue4Viewer;
      //打开闸门
      let angle = (this.maxangle * value) / 100;
      for (let index = 0; index < items.length; index++) {
        const item = items[index];
        this.openGate(item.code, angle);
      }

      // setTimeout(() => {
      //打开水流程效果
      let style = this.maxStyle;
      if (angle == 0) {
        style = this.minStyle;
      }
      // {
      //   volume: (this.maxStyle.volume * angle) / 100,
      //   speedX: 0,
      //   speedY: (this.maxStyle.speedY * angle) / 100,
      //   edge: (this.maxStyle.edge * angle) / 100,
      //   intensity: (this.maxStyle.intensity * angle) / 100,
      //   duration: -1,
      // };
      let codes = items.map(x => x.code);
      ue4Viewer.waterControl(codes, style);
      // }, 5 * 1000);
    },
    //闸门开合度的格式化
    percentFormatter(val) {
      return val + "%";
    },
    callBack(value) {
      console.log("value", value);
    },
    /**********滑动条 end************************************* */
    //初始化光照
    initLight() {
      let ue4Viewer = this.ue4Viewer;
      let code = this.light.code;
      ue4Viewer.get(code, e => {
        this.light.verticalAngle = e.rotate.yaw;
        this.light.horizontalAngle = e.rotate.pitch;
      });
      //获取光源强度
      ue4Viewer.getLight(code, e => {
        console.log("3");
      });
    },
    //初始化开度数据
    intiOpenness() {
      let data = [];
      for (let i = 0; i < xszdevice.rows.length; i++) {
        const row = xszdevice.rows[i];
        row.checked = false;
        row.openness2 = row.openness;
        data.push(row);
      }
      this.opennessInfo = data;
      this.valueData = data;
    },
    //关闭泄水闸
    closeXszOpenness() {
      let ue4Viewer = this.ue4Viewer;
      let datas = this.opennessInfo;
      datas.forEach(item => {
        //关闭闸门
        this.openGate(item.code, 0);
      });
      setTimeout(() => {
        let style = this.minStyle;
        let codes = datas.map(x => x.code);
        ue4Viewer.waterControl(codes, style);
      }, 0);
      //隐藏水效果
      ue4Viewer.hide(this.fluxWaterCode);
      //设置下游水面的高度到地上
      console.log(
        this.downstreamWaterCode,
        this.waterSurface.oldDownstreamWaterZ
      );
      ue4Viewer.get(this.downstreamWaterCode, e => {
        this.downstreamWaterZChange(this.waterSurface.oldDownstreamWaterZ);
        this.waterSurface.downstreamWaterZ = this.waterSurface.oldDownstreamWaterZ;
      });
    },
    //初始化 阀门及流水
    initXSZUe4() {
      let ue4Viewer = this.ue4Viewer;
      let datas = this.opennessInfo;
      datas.forEach(item => {
        let value = item.openness;
        //打开闸门
        let angle = (this.maxangle * value) / 100;
        this.openGate(item.code, angle);
        //打开水流程效果
        // let style = {
        //   volume: (this.maxStyle.volume * angle) / 100,
        //   speedX: 0,
        //   speedY: (this.maxStyle.speedY * angle) / 100,
        //   edge: (this.maxStyle.edge * angle) / 100,
        //   intensity: (this.maxStyle.intensity * angle) / 100,
        //   duration: -1,
        // };
      });
      //显示水效果
      ue4Viewer.show(this.fluxWaterCode);
      setTimeout(() => {
        let style = this.maxStyle;
        let codes = datas.filter(x => x.openness > 0).map(x => x.code);
        ue4Viewer.waterControl(codes, style);
      }, 1 * 1000);
      console.log("显示水效果:" + new Date().getTime());
      //设置下游水面的高度到地下
      ue4Viewer.get(this.downstreamWaterCode, e => {
        let location = {
          x: e.location.x,
          y: e.location.y,
          z: e.location.z - 2000
        };
        this.downstreamWaterZChange(location.z);
        this.waterSurface.downstreamWaterZ = location.z;
      });
      // //10s后抬升水面
      // setTimeout(() => {
      //   //抬升3次，每次抬升20个单位
      //   for (let i = 0; i < 5; i++) {
      //     setTimeout(() => {
      //       console.log("objectMove", "S_XYSM_001", i);
      //       ue4Viewer.objectMove("S_XYSM_001", {
      //         x: 0,
      //         y: 0,
      //         z: 40,
      //       });
      //     }, i * 5 * 1000);
      //   }
      // }, 10 * 1000);
      // //5分钟后，关闭水效果
      // setTimeout(() => {
      //   let style = this.minStyle;
      //   let codes = datas.map((x) => x.code);
      //   ue4Viewer.waterControl(codes, style);
      // }, 5 * 60 * 1000);
    },
    //跳转闸门视角
    focus(ue4id) {
      let ue4Viewer = this.ue4Viewer;
      ue4Viewer.focus(ue4id);
    },
    //打开闸门
    openGate(ue4id, roll) {
      let ue4Viewer = this.ue4Viewer;
      // ue4Viewer.focus(ue4id);
      ue4Viewer.objectRotateTo(ue4id, {
        roll: roll,
        pitch: 0,
        yaw: 0
      });
    },
    //水轮发电机组的初始化
    initSLFDJZ() {
      let ue4Viewer = this.ue4Viewer;

      //水轮发电机组的code
      let leafCodes = [];
      //设置水花高度z和水面高度z一致
      for (let i = 0; i < this.slfdjzList.length; i++) {
        const slfdjz = this.slfdjzList[i];
        if (Array.isArray(slfdjz.watercodes) && slfdjz.watercodes.length > 0) {
          for (let i = 0; i < slfdjz.watercodes.length; i++) {
            const watercode = slfdjz.watercodes[i];
            //水花
            ue4Viewer.get(watercode, e => {
              //下游水位
              ue4Viewer.get(slfdjz.targetwatercode, e2 => {
                console.log(e, e2);
                let p = {
                  x: e.location.x,
                  y: e.location.y,
                  z: e2.location.z + e2.boxExtent.z
                };
                ue4Viewer.objectMoveTo(watercode, p);
              });
            });
            //隐藏水花
            ue4Viewer.hide(watercode);
          }
        } else {
          //水花
          ue4Viewer.get(slfdjz.watercode, e => {
            //下游水位
            ue4Viewer.get(slfdjz.targetwatercode, e2 => {
              console.log(e, e2);
              let p = {
                x: e.location.x,
                y: e.location.y,
                z: e2.location.z + e2.boxExtent.z
              };
              ue4Viewer.objectMoveTo(slfdjz.watercode, p);
            });
          });

          //隐藏水花
          ue4Viewer.hide(slfdjz.watercode);
        }
        if (slfdjz.leafcode) {
          leafCodes.push(slfdjz.leafcode);
        }
      }
      //设置叶片停止转动
      if (leafCodes.length > 0) {
        ue4Viewer.waterTurbineRotate(leafCodes, false);
      }
      //设置水轮发电机组
      ue4Viewer.sljSimulation(0, false);
    },
    //设备类型切换
    deviceTypeChangeHandle(e) {
      //船闸仿真时不可操作
      if (this.czList[0].disabled) {
        return;
      }

      let curele = e.currentTarget;
      let pele = curele.parentElement;
      //切换active 的class
      for (let i = 0; i < pele.childElementCount; i++) {
        const ele = pele.children[i];
        if (ele.classList.contains("active")) {
          if (ele != curele) {
            ele.classList.remove("active");
          }
        } else {
          if (ele === curele) {
            ele.classList.add("active");
          }
        }
      }

      //切换数据
      let text = curele.getAttribute("data-id");
      this.activeDevice = text;
      //泄水闸
      if (text == this.DEVICETYPE.XSZ) {
        this.initXSZUe4();
        this.ue4Viewer.focus(this.opennessInfo[0].code);
      }
      //船闸
      if (text == this.DEVICETYPE.CZ) {
        //关闭泄水闸
        this.closeXszOpenness();
        this.initCZUe4();
        // this.ue4Viewer.focus(this.czList[0].board.code);
      }
      //水轮发电机组
      if (text == this.DEVICETYPE.SLFDJZ) {
        this.closeXszOpenness();
        this.initSLFDJZ();
        this.ue4Viewer.focus(this.slfdjzList[0].centercode, 500);
      }
    },
    //页面的默认加载事件
    initPage() {
      this.intiOpenness();
      // this.initLight();
      // this.initXSZUe4();
      //水面初始化设置
      this.initWaterZ();
    },
    //页面切换后事件
    unloadPage() {
      this.closeXszOpenness();
    }
  },
  props: {
    ue4Viewer: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    //船闸模拟时，选中的船闸，按照code倒序排列
    choosedboard() {
      let items = this.locksObj.boards.filter(
        x => x.choosed === ChoosedStatus.choosed
      );
      let pointcodes = this.locksObj.pointcodes;
      let itemnum = this.locksObj.itemnum;
      //排序，按照
      let boards = items.sort((a, b) => {
        let acode = parseInt(pointcodes[a.code][0]);
        let bcode = parseInt(pointcodes[b.code][0]);
        if (acode > itemnum) {
          acode = acode - itemnum;
        }
        if (bcode > itemnum) {
          bcode = bcode - itemnum;
        }
        return acode - bcode;
      });
      console.log(JSON.stringify(boards));
      return boards;
    },
    //船闸模拟时，已选中的船闸
    choosingboard() {
      let item = this.locksObj.boards.find(
        x => x.choosed === ChoosedStatus.choosing
      );
      return item;
    },
    //船闸模拟时，选中的船闸code
    choosingboardcode() {
      let item = this.choosingboard && this.choosingboard.code;
      return item;
    },
    //泄水闸分组
    xszGroups() {
      let arr = [];
      let titleArr = [];
      if (this.opennessInfo && this.opennessInfo.length > 0) {
        for (let i = 0; i < this.opennessInfo.length; i++) {
          const item = this.opennessInfo[i];
          if (!titleArr.includes(item.group)) {
            arr.push({ title: item.group, checked: false });
            titleArr.push(item.group);
          }
        }
      }
      return arr;
    }
  }
};
</script>
<style lang="less" scoped>
#simulation-main-container {
  user-select: none;

  .mc-left,
  .mc-right {
    visibility: visible;
    width: 456px;
    padding-left: 20px;
    padding-top: 15px;

    .mc-left-sub {
      width: 100%;
      padding-bottom: 20px;

      .sub-top {
        height: 46px;
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
        height: calc(100% - 46px);
      }
    }

    .mc-left-1 {
      // height: 224px;
      height: 22.997947%;
      margin-top: 0px;
      padding-top: 0px;

      .sub-top {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
        height: calc(100% - 25px);
        display: flex;

        .wc-left {
          width: 134px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            width: 96px;
            height: 76px;
            // margin-top: 6px;
            // margin-top: calc(50% - 83px); //(100% + 30 - 136)/2 - 30
            margin-top: 5px;
            background-image: url(../../assets/svg/icon4-1.svg);
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
          }
        }
        .wc-right {
          width: calc(100% - 134px);
          height: 100%;
          text-align: left;
          display: flex;
          justify-content: left;
          align-items: center;

          .wc-right-top {
            // line-height: 35px;
            // margin-top: 18px;
            height: 36px;
            font-size: 20px;
            // margin-top: 40px;
            color: #fff;
          }

          .wc-right-bottom {
            font-size: 36px;
            // color: #1ff8e6;
          }
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 8px;
        display: flex;
      }
    }

    .mc-left-2 {
      height: calc(77.002053% - 20px);

      .sub-top {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 45px;
        display: flex;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg2.svg);
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: calc(100% - 45px);
        // width: 431px;
        // display: flex;
        overflow: hidden;
        padding-right: 15px;
        padding-left: 30px;
        overflow-y: auto;

        .group-title {
          text-align: left;
          font-size: 20px;
          text-indent: 5px;
          height: 60px;
          line-height: 60px;
          border-bottom: 1px solid rgba(31, 248, 230, 0.4);
        }
        .opratebtns {
          overflow-x: hidden;
          overflow-y: auto;
          height: calc(100% - 20px);

          .oprateitem {
            width: calc(100% - 15px);
            padding-top: 10px;
            padding-bottom: 0px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid rgba(31, 248, 230, 0.3);

            .checkboxitem {
              width: 36px;
            }

            .btnitem {
              width: calc(100% - 36px);
            }

            .ant-row {
              width: 100%;
            }

            .text-1 {
              font-size: 18px;
              text-align: left;
            }

            .text-2 {
              text-align: left;
            }

            .slider {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-left: 1px;
              padding-bottom: 10px;
              width: 100%;
            }

            .title {
              font-size: 16px;
            }
          }
        }
      }
    }
  }

  .cz-container {
    visibility: hidden;

    .mc-left-2 {
      // height: auto;
      height: 165px;
      visibility: visible;

      .sub-bottom .opratebtns {
        padding-bottom: 0px;
        height: 100%;

        .oprateitem {
          padding: 10px 10px;
        }
      }
    }

    .mc-left-4 {
      height: calc(100% - 165px);
      visibility: hidden;

      .sub-bottom {
        .item-list {
          padding: 0px 22px;
          height: calc(100% - 84px);
          display: flex;

          .item-list-left {
            overflow-y: auto;

            .item {
              width: 175px;
              height: 104px;
              margin: 16px 0px;
              border: 1px solid #017b8b;
              border-radius: 5px;
              font-size: 14px;
              padding: 12px;
              cursor: pointer;

              p {
                margin: 0px;
                height: 20px;
                line-height: 20px;
                text-align: left;
              }

              &.active_1 {
                box-shadow: inset 0px 0px 20px 5px #13bfc0;
              }
              &.active_2 {
                display: none;
              }
            }
          }

          .item-list-right {
            .pos-top,
            .pos-bottom {
              height: 18px;
              width: 180px;
              margin: auto;
              display: flex;
            }

            .pos-center {
              margin: auto;
              width: 180px;
              height: calc(100% - 36px);
              padding: 8px 0px;
              display: flex;

              .pos-center-1,
              .pos-center-3 {
                width: 3px;
                border-radius: 3px;
                border: 1px solid #008997;
                background-color: #008997;
                display: flex;
                flex-flow: row wrap;

                .dot-item {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex: 0 0 100%;

                  span {
                    display: block;
                    width: 9px;
                    height: 9px;
                    margin-left: -4.5px;
                    border-radius: 100%;
                    background-color: #95f204;
                  }
                }
              }

              .pos-center-2 {
                width: calc(100% - 6px);

                .point-list {
                  display: flex;
                  flex-flow: row wrap;
                  margin: 0px 12px;
                  height: 100%;
                  width: calc(100% - 24px);

                  .point-list-left,
                  .point-list-right {
                    max-width: calc(50% - 1px);
                    flex: 0 0 50%;
                    display: flex;
                    flex-flow: column;
                  }

                  .point-item {
                    display: block;
                    flex: 0 0 50%;
                    margin: 1px;
                    border-radius: 1px;
                    background-color: #016d70;
                    cursor: pointer;
                    max-height: calc(9.09% - 2px);
                    flex: 0 0 100%;

                    &.choosed {
                      background-color: #70b519;
                      margin-bottom: 0px;
                      margin-top: 0px;
                      display: flex;
                      justify-content: center;
                      align-items: center;
                      cursor: default;
                      position: relative;
                      max-height: calc(9.09% - 0px);
                      // pointer-events: none;
                    }
                    // &.choosed:first-child {
                    //   margin-top: 1px;
                    // }
                    // &.choosed:last-child {
                    //   margin-bottom: 1px;
                    // }
                    &.choosed.first {
                      margin-top: 1px;
                      max-height: calc(9.09% - 1px);
                    }
                    &.choosed.last {
                      margin-bottom: 1px;
                      max-height: calc(9.09% - 1px);
                    }
                  }
                }
              }
            }

            .pos-top-left,
            .pos-top-right {
              flex: 2;
              height: 100%;
              background-image: url(../../assets/imgs/arrows.png);
              background-position: bottom;
              background-repeat: no-repeat;
              background-size: 100%;
            }
            .pos-top-right {
              transform: rotateY(180deg);
            }

            .down {
              transform: rotate(180deg);
            }
          }

          & > div {
            flex: 2;
          }
        }

        .opratebtn {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;

          .type-item {
            width: 130px;
            height: 42px;
            margin: 0px;
            background-image: url(../../assets/imgs/button.png);
          }
        }
      }

      .type-item {
        visibility: hidden;
      }

      &.enable {
        visibility: visible;

        .type-item {
          visibility: visible;
        }
      }
    }
  }

  .slfdjz-container {
    visibility: hidden;

    .mc-left-2 {
      height: auto;
      visibility: visible;

      .sub-bottom .opratebtns {
        padding-bottom: 20px;

        .oprateitem {
          padding: 10px 10px;
        }
      }
    }
  }

  .mc-right {
    position: absolute;
    right: 0px;
    padding-right: 20px;

    .mc-right-sub {
      // margin-top: 20px;
      width: 100%;
      // height: 224px;
      height: 37.577002%;
      padding-top: 0px;

      .sub-top {
        height: 46px;
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: cover;

        h3 {
          color: #fff;
          margin: 0;
          padding-left: 40px;
          padding-top: 8px;
          font-weight: normal;
          text-align: left;
        }
      }

      .sub-bottom {
        background-image: url(../../assets/svg/BlockBg.svg);
        background-position: bottom center;
        background-repeat: no-repeat;
        background-size: cover;
        height: calc(100% - 46px);
      }
    }

    .mc-right-4 {
      height: 690px;

      .sub-bottom {
        height: calc(100% - 46px);

        .data-container {
          width: calc(100% - 60px);
          margin-left: 30px;
          padding-top: 20px;

          .data-item {
            .title {
              width: 100%;
              text-align: left;
              font-size: 18px;
              position: relative;
              margin-bottom: 15px;

              .shrinkbtn {
                width: 15px;
                height: 15px;
                cursor: pointer;
                position: absolute;
                top: 10px;
                right: 10px;
                background-image: url(../../assets/svg/arrow-right.svg);
                background-position: bottom center;
                background-repeat: no-repeat;
                background-size: cover;

                &.opened {
                  background-image: url(../../assets/svg/arrow-down.svg);
                }
              }
            }

            .content {
              padding-left: 18px;
              padding-top: 15px;

              .env-item {
                .item-title {
                  text-align: left;
                  font-size: 16px;
                }
                .item-btns {
                  display: flex;
                  padding-left: 16px;
                  width: 100%;

                  .btn {
                    width: 60px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    margin: 10px;
                    border-radius: 7px;
                    border: 1px solid rgba(76, 222, 213, 0.5);
                    box-shadow: unset;
                    cursor: pointer;

                    &.active {
                      box-shadow: inset 0px 0px 10px 10px
                        rgba(76, 222, 213, 70%);
                    }
                  }

                  .subitem {
                    width: 100%;
                    padding-left: 10px;
                    padding-top: 10px;
                    display: block;

                    .subitem-title {
                      text-align: left;
                      font-size: 16px;
                      text-indent: 0px;
                      margin: 10px 0px 0px 0px;
                    }
                  }

                  .ant-row {
                    width: 100%;
                  }
                }

                .item-btns-1 {
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }

  .mc-bottom,
  .mc-left {
    .type-item {
      background-image: url(../../assets/svg/Button2-1.svg);
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: 100%;
      visibility: visible;
      height: 52px;
      width: 140px;
      margin-left: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      cursor: pointer;

      &.active {
        background-image: url(../../assets/svg/Button2-2.svg);
      }
    }
  }

  .mc-bottom {
    position: absolute;
    bottom: 0px;
    height: auto !important;
    width: 100% !important;
    justify-content: center;

    .type-item-3 {
      width: 200px;
      background-image: unset;
      justify-content: flex-start;
      position: relative;

      .item-left {
        width: 100px;
        height: 100%;
        background-image: url(../../assets/svg/Button2-1.svg);
        background-position: left;
        background-size: cover;
        background-repeat: no-repeat;
      }

      .item-right {
        width: 100px;
        height: 100%;
        background-image: url(../../assets/svg/Button2-1.svg);
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        position: initial;

        .text {
          white-space: nowrap;
          position: absolute;
          left: 40px;
        }
      }

      &.active {
        background-image: unset;

        .item-left {
          background-image: url(../../assets/svg/Button2-2.svg);
        }

        .item-right {
          background-image: url(../../assets/svg/Button2-2.svg);
        }
      }
    }
  }

  /deep/.ant-slider {
    .ant-slider-rail {
      background-color: rgba(31, 248, 230, 0.3);
    }

    .ant-slider-track {
      background-color: rgba(31, 248, 230, 0.6);
    }

    .ant-slider-handle {
      border: solid 2px rgba(31, 248, 230, 0.6);
    }
  }

  /deep/ .ant-input-number {
    color: #f5f5f5;
    background-color: #051026f5;
    border: 1px solid rgba(76, 222, 213, 0.5);
    width: 65px;
    border-radius: 5px;
  }

  /deep/.ant-checkbox-inner {
    background-color: unset;
    border: 1px solid rgba(31, 248, 230, 0.6);
  }
  /deep/.ant-checkbox-checked .ant-checkbox-inner {
    background-color: rgba(31, 248, 230, 0.6);
    border-color: rgba(31, 248, 230, 0.6);
  }

  /deep/.ant-checkbox-checked::after {
    border: 1px solid rgba(31, 248, 230, 0.6);
  }

  /deep/.ant-checkbox-wrapper:hover .ant-checkbox-inner,
  /deep/.ant-checkbox:hover .ant-checkbox-inner,
  /deep/.ant-checkbox-input:focus + .ant-checkbox-inner {
    border: 1px solid rgba(31, 248, 230, 0.6);
  }

  /deep/.ant-checkbox-checked .ant-checkbox-inner::after {
    border-color: #0f4e4e;
  }

  /deep/.ant-switch {
    border: 1px solid rgba(31, 248, 230, 0.6);
    background-color: unset;
  }

  /deep/.ant-switch.ant-switch-checked {
    color: rgba(31, 248, 230, 0.6);
    background-color: rgba(31, 248, 230, 0.8);
  }
}

.chose {
  background-color: #1ff8e6;
}
</style>

<style lang="less">
.point-item.choosed {
  .choosedboard {
    position: absolute;
    // height: 200%;
    // background: #70b519;
    // width: 100%;
    // padding-top: 50%;

    .cancelicon {
      width: 14px;
      height: 14px;
      background-image: url(../../assets/imgs/cancel.png);
      background-position: bottom;
      background-repeat: no-repeat;
      background-size: 100%;
      margin: auto;
      cursor: pointer;
    }

    &.even {
      top: 50%;
      z-index: 1;
    }
  }
}
</style>
